<script>
import treetable from '@/mixins/treetable/index.js'
import AjaxStore from '@/utils/store/proxyAjax'
import DialogForm from '@/components/DialogForm'
import DataFenpei from './dataFenpei/dataFenpei.vue'
import RoleFenpei from './roleFenpei/roleFenpei.vue'
import ImportPeople from './importPeople/importPeople.vue'
import store from './store.js'
import formHandle from './formHandle/formHandle.js'
import batchImport from './formHandle/batchImport.js'
import WrapTable from '@/components/WrapTable'
import ButtonList from '@/components/ButtonList'
import TableButtonList from '@/components/TableButtonList'
import SearchForm from '@/components/SearchForm'
import { validateEmail, validateTelephone } from '@/utils/validate'
import { mapGetters } from 'vuex'
import { deepClone } from '@/utils/index'
import request from '@/utils/request'
import GroupTree from '@/components/DatagroupTree'

export default {
  name: 'user',
  mixins: [treetable, store, formHandle, batchImport],
  components: {
    GroupTree,
    DataFenpei,
    RoleFenpei,
    ImportPeople,
    WrapTable,
    ButtonList,
    TableButtonList,
    SearchForm,
    DialogForm
  },
  provide() {
    return {
      user: this
    }
  },
  computed: {
    ...mapGetters([
      'projectId',
      'projectName',
      'systemType',
      'token',
      'websiteId'
    ])
  },
  created() {
    this.handleTable()
    this.addModelInitData = deepClone(this.formPanel.add.model)
    this.editModelInitData = deepClone(this.formPanel.edit.model)
  },
  data() {
    const validateUserEmail = (rule, value, callback) => {
      if (!value || value.trim() === '') {
        callback(new Error('请输入邮箱'))
      } else if (value && !validateEmail(value)) {
        callback(new Error('邮箱格式不正确'))
      } else {
        callback()
      }
    }
    const validateTel = (rule, value, callback) => {
      if (!value || (value && validateTelephone(value))) {
        callback()
      } else {
        callback(new Error('手机号格式不正确'))
      }
    }
    return {
      roleFenpeiLoading: false,
      tableOptWidth: '120',
      tableSelectionObj: { selectable: this.partTableSelectionColForbid },
      cNodeStr: '',
      cNode: [],
      tree: {
        width: '280',
        accordion: false,
        isShowHeader: true,
        treeMenuButtonList: this.$store.getters.projectId
          ? []
          : this.treeMenuBtns,
        treeOperateButtonList: [],
        showCheckbox: false,
        selectTree: {
          disabled: true,
          treeParams: {
            get: {
              url: '/v1/dataProvider/getGroupTreeList',
              idKey: 'id',
              nextNodeKey: 'pid'
            }
          },
          valueToLabelParams: {
            url: '/v1/dataProvider/getGroupName',
            idKey: 'groupId'
          },
          clearable: true,
          selectCodeVal: this.$store.getters.groupId || '',
          selectCodeKey: 'groupId',
          visibleChangeLoad: true
        },
        emptyTopNode: {
          expanded: true,
          id: '',
          leaf: false,
          text: '部门树'
        },
        nextNodeKey: 'node',
        idKey: 'deptId',
        search: {
          searchKey: 'deptName'
        },
        title: '部门选择',
        getNextChildNode: this.getNextNode,
        delNode: this.delNode
      },

      pidKey: 'pid',
      idKey: 'deptId',
      delIdKey: 'userId',
      labelKey: 'deptName',
      nodeCheckedKey: 'checked',
      nodeChildrenKey: 'children',
      nodeLeafKey: 'leaf',
      nodeIdKey: 'id',
      nodeLabelKey: 'text',
      tableTitle: '人员管理',
      showInputFlag: true,
      inputPlaceholder: '输入姓名或账号搜索',
      groupId: '1',

      currentNode: null,
      selectedList: [],
      dialogType: '',
      dialogRoleFenpeiTitle: '角色分配',
      dialogDataFenpeiTitle: '数据分配',
      dialogImportPeopleTitle: '人员导入',
      firstLoadFlag: true,
      allPath: '',
      pUserId: '',

      addNodeInfoUrl: '/v1/sys/user/add',
      updateNodeInfoUrl: '/v1/sys/user/update',
      delNodeInfoUrl: '/v1/sys/user/delete',
      delNodeInfoListUrl: '/v1/sys/user/deleteList',
      roleFenpeiUrl: '/v1/sys/user/assignUserRoles',
      resetPasswordUrl: '/v1/sys/user/resetPassword',
      dataFenpeiUrl: '/v1/sys/user/assignDataAuth',
      getHavedRoleUrl: '/v1/sys/user/findRoleListByUserId',
      importPeopleUrl: '/v1/sys/user/importUser',
      getHavedImportPeopleUrl: '/v1/sys/user/getImportUserListByDeptId',
      getNextNodeUrl: '/v1/dataProvider/getDeptmentTreeList',
      getAllPathUrl: '/v1/yq/common/getAllPath',
      downloadTemplateUrl: '/v1/datac/app/importData/getTemplate', // 下载模块
      url: '/v1/sys/user/findById',
      store: new AjaxStore({
        url: '/v1/sys/user/query'
      }),

      userId: '',
      userName: '',
      q_deptId: '',

      columnsProject: [
        {
          prop: 'userNo',
          label: '账号',
          sortable: true,
          width: '120',
          'header-align': 'center'
        },
        {
          prop: 'userName',
          label: '姓名',
          sortable: true,
          width: '120',
          'header-align': 'center',
          scopedSlots: {
            default: scope => {
              return (
                <c-popover
                  trigger='hover'
                  ref='popover'
                  on-show={this.getUserAllPath.bind(
                    this,
                    scope.row.userId,
                    scope.row.userName
                  )}
                  placement='top'
                  popper-class={this.setClassName(scope.row.userId)}>
                  {this.allPath}
                  <div slot='reference' class='name-wrapper user-name'>
                    {scope.row.userName}
                  </div>
                </c-popover>
              )
            }
          }
        },
        {
          prop: 'groupName',
          label: '所属机构',
          sortable: true,
          'show-overflow-tooltip': true,
          width: '160',
          'header-align': 'center'
        },
        {
          prop: 'deptName',
          label: '部门',
          sortable: true,
          'show-overflow-tooltip': true,
          width: '160',
          'header-algin': 'center'
        },
        {
          prop: 'ownRoles',
          label: '已有角色',
          sortable: true,
          'min-width': '240',
          'show-overflow-tooltip': true,
          'header-algin': 'center'
        },
        {
          prop: 'source',
          label: '来源',
          sortable: true,
          width: '73',
          'header-algin': 'center'
        },
        {
          prop: 'dataStatus',
          label: '状态',
          sortable: true,
          width: '100',
          'header-align': 'center',
          formatter: (row, column, cellValue) => (cellValue ? '启用' : '停用')
        }
      ],

      columnsPingtaiWithoutProject: [
        {
          prop: 'userNo',
          label: '账号',
          sortable: true,
          'min-width': '100',
          'show-overflow-tooltip': true,
          'header-align': 'center'
        },
        {
          prop: 'userName',
          label: '姓名',
          sortable: true,
          'min-width': '100',
          'show-overflow-tooltip': true,
          'header-align': 'center'
        },
        {
          prop: 'groupName',
          label: '所属机构',
          sortable: true,
          'min-width': '120',
          'show-overflow-tooltip': true,
          'header-align': 'center'
        },
        {
          prop: 'deptName',
          label: '部门',
          sortable: true,
          'min-width': '100',
          'show-overflow-tooltip': true,
          'header-algin': 'center'
        },
        {
          prop: 'ownRoles',
          label: '已有角色',
          sortable: true,
          'min-width': '200',
          'show-overflow-tooltip': true,
          'header-algin': 'center'
        },
        {
          prop: 'dataStatus',
          label: '状态',
          sortable: true,
          width: '100',
          'header-align': 'center',
          formatter: (row, column, cellValue) => (cellValue ? '启用' : '停用')
        }
      ],

      columnsPingtai: [
        {
          prop: 'userNo',
          label: '账号',
          sortable: true,
          width: '120',
          'header-align': 'center'
        },
        {
          prop: 'userName',
          label: '姓名',
          sortable: true,
          width: '140',
          'header-align': 'center',
          scopedSlots: {
            default: scope => {
              return (
                <c-popover
                  trigger='hover'
                  ref='popover'
                  on-show={this.getUserAllPath.bind(
                    this,
                    scope.row.userId,
                    scope.row.userName
                  )}
                  placement='top'
                  popper-class={this.setClassName(scope.row.userId)}>
                  {this.allPath}
                  <div slot='reference' class='name-wrapper user-name'>
                    {scope.row.userName}
                  </div>
                </c-popover>
              )
            }
          }
        },
        {
          prop: 'groupName',
          label: '所属机构',
          sortable: true,
          'show-overflow-tooltip': true,
          width: '160',
          'header-align': 'center'
        },
        {
          prop: 'deptName',
          label: '部门',
          sortable: true,
          'show-overflow-tooltip': true,
          width: '160',
          'header-algin': 'center'
        },
        {
          prop: 'email',
          label: '邮箱',
          sortable: true,
          'min-width': '240',
          'header-algin': 'center'
        },
        {
          prop: 'dataStatus',
          label: '状态',
          sortable: true,
          width: '100',
          'header-align': 'center',
          formatter: (row, column, cellValue) => (cellValue ? '启用' : '停用')
        }
      ],

      columns: [],
      searchFields: [],
      searchModel: {},
      searchBtnList: [],

      toolPanelBtnListPingtai: this.toolPanelBtnListPingtai,
      toolPanelBtnListProject: this.toolPanelBtnListProject,
      toolPanelBtnList: [],
      tableRowBtnListPingtai: this.tableRowBtnListPingtai,
      tableRowBtnListProjectImport: this.tableRowBtnListProjectImport,
      tableRowBtnLists: this.tableRowBtnLists,
      tableRowBtnList: [],

      addProjectFields: [
        {
          label: '所属机构',
          prop: 'groupId',
          xType: 'SelectTree.TREE',
          anchor: 24,
          disabled: true,
          ref: 'addGroup',
          relatedFields: ['addDeptment'],
          treeParams: {
            get: {
              getNextNode: this.getGroupTree
            }
          },
          valueToLabelParams: {
            url: '/v1/dataProvider/getGroupName',
            idKey: 'groupId'
          }
        },
        {
          label: '上级部门',
          prop: 'deptId',
          xType: 'SelectTree.TREE',
          anchor: 24,
          ref: 'addDeptment',
          on: {
            'el.form.update': (val, ctx, origin, form) => {
              // 值,当前组件,关联组件
              form.model.deptId = ''
              ctx.reload({
                groupId: form.model.groupId
              })
            }
          },
          treeParams: {
            get: {
              getNextNode: this.getAddDeptmentTree
            }
          },
          valueToLabelParams: {
            url: '/v1/dataProvider/getDeptName',
            idKey: 'deptId'
          }
        },
        { label: '账号', prop: 'userNo', placeholder: '输入账号', anchor: 24 },
        {
          label: '姓名',
          prop: 'userName',
          placeholder: '输入姓名',
          anchor: 24
        },
        { label: '性别', prop: 'sex', xType: 'SelectCode.SEX', anchor: 24 },
        // { label: "职位", prop: "position", placeholder: "输入职位", anchor: 24},
        {
          label: '状态',
          prop: 'dataStatus',
          xType: 'switch',
          anchor: 24,
          'active-value': 1,
          'inactive-value': 0
        },
        {
          label: '时效时间',
          prop: 'time',
          xType: 'SelectTimeRange.daterange',
          suffix: true,
          suffixInfo: '(不填为永久有效)',
          anchor: 20
        },
        { label: '邮箱', prop: 'email', placeholder: '输入邮箱', anchor: 24 },
        {
          label: '办公室电话',
          prop: 'officeTel',
          placeholder: '输入办公室电话',
          anchor: 24
        },
        {
          label: '联系电话',
          prop: 'telephone',
          placeholder: '输入联系电话',
          anchor: 24
        },
        { label: '备注', prop: 'remark', placeholder: '输入备注', anchor: 24 }
      ],

      editProjectFields: [
        {
          label: '所属机构',
          prop: 'groupId',
          xType: 'SelectTree.TREE',
          anchor: 24,
          disabled: true,
          ref: 'editGroup',
          relatedFields: ['editDeptment'],
          treeParams: {
            get: {
              getNextNode: this.getGroupTree
            }
          },
          valueToLabelParams: {
            url: '/v1/dataProvider/getGroupName',
            idKey: 'groupId'
          }
        },
        {
          label: '所属部门',
          prop: 'deptId',
          xType: 'SelectTree.TREE',
          anchor: 24,
          ref: 'editDeptment',
          treeParams: {
            get: {
              getNextNode: this.getEditDeptmentTree
            }
          },
          valueToLabelParams: {
            url: '/v1/dataProvider/getDeptName',
            idKey: 'deptId'
          }
        },
        { label: '账号', prop: 'userNo', placeholder: '输入账号', anchor: 24 },
        {
          label: '姓名',
          prop: 'userName',
          placeholder: '输入姓名',
          anchor: 24
        },
        { label: '性别', prop: 'sex', xType: 'SelectCode.SEX', anchor: 24 },
        // { label: "职位", prop: "position", placeholder: "输入职位", anchor: 24},
        {
          label: '状态',
          prop: 'dataStatus',
          xType: 'switch',
          anchor: 24,
          'active-value': 1,
          'inactive-value': 0
        },
        {
          label: '时效时间',
          prop: 'time',
          xType: 'SelectTimeRange.daterange',
          suffix: true,
          suffixInfo: '(不填为永久有效)',
          anchor: 24
        },
        { label: '邮箱', prop: 'email', placeholder: '输入邮箱', anchor: 24 },
        {
          label: '办公室电话',
          prop: 'officeTel',
          placeholder: '输入办公室电话',
          anchor: 24
        },
        {
          label: '联系电话',
          prop: 'telephone',
          placeholder: '输入联系电话',
          anchor: 24
        },
        { label: '备注', prop: 'remark', placeholder: '输入备注', anchor: 24 }
      ],

      lookProjectFields: [
        {
          label: '所属机构',
          prop: 'groupName',
          anchor: 24,
          disabled: true
        },
        {
          label: '所属部门',
          prop: 'deptName',
          anchor: 24,
          disabled: true
        },
        {
          label: '账号',
          prop: 'userNo',
          placeholder: '',
          anchor: 24,
          disabled: true
        },
        {
          label: '姓名',
          prop: 'userName',
          placeholder: '',
          anchor: 24,
          disabled: true
        },
        {
          label: '性别',
          prop: 'sex',
          xType: 'SelectCode.SEX',
          anchor: 24,
          disabled: true
        },
        // { label: "职位", prop: "position", placeholder: "输入职位", anchor: 24},
        {
          label: '状态',
          prop: 'dataStatus',
          xType: 'switch',
          anchor: 24,
          'active-value': 1,
          'inactive-value': 0,
          disabled: true
        },
        {
          label: '时效时间',
          prop: 'time',
          xType: 'SelectTimeRange.daterange',
          suffix: true,
          suffixInfo: '(不填为永久有效)',
          anchor: 24,
          disabled: true
        },
        {
          label: '邮箱',
          prop: 'email',
          placeholder: '',
          anchor: 24,
          disabled: true
        },
        {
          label: '办公室电话',
          prop: 'officeTel',
          placeholder: '',
          anchor: 24,
          disabled: true
        },
        {
          label: '联系电话',
          prop: 'telephone',
          placeholder: '',
          anchor: 24,
          disabled: true
        },
        {
          label: '备注',
          prop: 'remark',
          placeholder: '',
          anchor: 24,
          disabled: true
        }
      ],
      // 新增人员弹窗
      formPanel: {
        add: {
          model: {
            userId: '',
            groupId: '1',
            userNo: '',
            userName: '',
            userGrade: '',
            cardNo: '',
            userGuid: '',
            password: '',
            desPassword: '',
            sex: '',
            deptId: '',
            telephone: '',
            officeTel: '',
            address: '',
            email: '',
            birthday: '',
            idCard: '',
            enabled: '',
            time: '',
            age: '',
            theme: '',
            authStartDate: '',
            authEndDate: '',
            dataStatus: 1,
            json: '',
            version: '',
            creator: '',
            createdTime: '',
            updator: '',
            updatedTime: '',
            ownRoles: '',
            remark: ''
          },
          fields: [
            {
              label: '所属机构',
              prop: 'groupId',
              xType: 'SelectTree.TREE',
              anchor: 24,
              ref: 'addGroup',
              disabled: true,
              relatedFields: ['addDeptment'],
              treeParams: {
                get: {
                  getNextNode: this.getGroupTree
                }
              },
              valueToLabelParams: {
                url: '/v1/dataProvider/getGroupName',
                idKey: 'groupId'
              }
            },
            {
              label: '所属部门',
              prop: 'deptId',
              xType: 'SelectTree.TREE',
              anchor: 24,
              ref: 'addDeptment',
              on: {
                'el.form.update': (val, ctx, origin, form) => {
                  // 值,当前组件,关联组件
                  form.model.deptId = ''
                  ctx.reload({
                    groupId: form.model.groupId
                  })
                }
              },
              treeParams: {
                get: {
                  getNextNode: this.getAddDeptmentTree
                }
              },
              valueToLabelParams: {
                url: '/v1/dataProvider/getDeptName',
                idKey: 'deptId'
              }
            },
            {
              label: '账号',
              prop: 'userNo',
              placeholder: '输入账号',
              anchor: 24
            },
            {
              label: '姓名',
              prop: 'userName',
              placeholder: '输入姓名',
              anchor: 24
            },
            // {
            //   label: "用户等级",
            //   prop: "userGrade",
            //   xType: "SelectCode.USER_GRADE",
            //   placeholder: "请选择用户等级",
            //   anchor: 24
            // },
            { label: '性别', prop: 'sex', xType: 'SelectCode.SEX', anchor: 24 },
            // { label: "职位", prop: "position", placeholder: "输入职位", anchor: 24},
            {
              label: '状态',
              prop: 'dataStatus',
              xType: 'switch',
              anchor: 24,
              'active-value': 1,
              'inactive-value': 0
            },
            {
              label: '时效时间',
              prop: 'time',
              xType: 'SelectTimeRange.daterange',
              suffix: true,
              suffixInfo: '(不填为永久有效)',
              anchor: 20
            },
            {
              label: '邮箱',
              prop: 'email',
              placeholder: '输入邮箱',
              anchor: 24
            },
            {
              label: '办公室电话',
              prop: 'officeTel',
              placeholder: '输入办公室电话',
              anchor: 24
            },
            {
              label: '联系电话',
              prop: 'telephone',
              placeholder: '输入联系电话',
              anchor: 24
            },
            {
              label: '备注',
              prop: 'remark',
              placeholder: '输入备注',
              anchor: 24
            }
          ],
          rules: {
            groupId: [
              { required: true, message: '请选择所属机构', trigger: 'change' }
            ],
            deptId: [
              { required: true, message: '请选择所属部门', trigger: 'change' }
            ],
            userNo: [
              { required: true, message: '请输入账号', trigger: 'blur' }
            ],
            userName: [
              { required: true, message: '请输入姓名', trigger: 'blur' }
            ],
            // userGrade: [
            //   { required: true, message: "请选择用户等级", trigger: "blur" }
            // ],
            // sex: [{ required: true, message: "请选择性别", trigger: "change" }],
            // dataStatus: [
            //   { required: true, message: "请输入状态", trigger: "blur" }
            // ],
            email: [{ required: false, trigger: "blur", validator: validateUserEmail }],
            telephone: [
              { required: false, trigger: 'blur', validator: validateTel }
            ]
          },
          title: '人员新增',
          class: 'addTest',
          type: 'ADD',
          ref: 'addForm',
          submitBtnList: this.addSubmitBtn
        },
        // 列表修改人员弹窗
        edit: {
          model: {
            userId: '',
            groupId: '1',
            userNo: '',
            userName: '',
            userGrade: '',
            userGuid: '',
            cardNo: '',
            password: '',
            desPassword: '',
            sex: '',
            deptId: '',
            telephone: '',
            officeTel: '',
            address: '',
            email: '',
            birthday: '',
            idCard: '',
            enabled: '',
            time: '',
            age: '',
            theme: '',
            authStartDate: '',
            authEndDate: '',
            dataStatus: 0,
            json: '',
            version: '',
            creator: '',
            createdTime: '',
            updator: '',
            updatedTime: '',
            ownRoles: '',
            remark: ''
          },
          fields: [
            {
              label: '所属机构',
              prop: 'groupId',
              xType: 'SelectTree.TREE',
              anchor: 24,
              ref: 'editGroup',
              disabled: true,
              relatedFields: ['editDeptment'],
              treeParams: {
                get: {
                  getNextNode: this.getGroupTree
                }
              },
              valueToLabelParams: {
                url: '/v1/dataProvider/getGroupName',
                idKey: 'groupId'
              }
            },
            {
              label: '所属部门',
              prop: 'deptId',
              xType: 'SelectTree.TREE',
              anchor: 24,
              ref: 'editDeptment',
              on: {
                'el.form.update': (val, ctx, origin, form) => {
                  // 值,当前组件,关联组件
                  form.model.deptId = ''
                  ctx.reload({
                    groupId: form.model.groupId
                  })
                }
              },
              treeParams: {
                get: {
                  getNextNode: this.getEditDeptmentTree
                }
              },
              valueToLabelParams: {
                url: '/v1/dataProvider/getDeptName',
                idKey: 'deptId'
              }
            },
            {
              label: '账号',
              prop: 'userNo',
              placeholder: '输入账号',
              anchor: 24
            },
            {
              label: '姓名',
              prop: 'userName',
              placeholder: '输入姓名',
              anchor: 24
            },
            // {
            //   label: "用户等级",
            //   prop: "userGrade",
            //   xType: "SelectCode.USER_GRADE",
            //   placeholder: "请选择用户等级",
            //   anchor: 24
            // },
            { label: '性别', prop: 'sex', xType: 'SelectCode.SEX', anchor: 24 },
            // { label: "职位", prop: "position", placeholder: "输入职位", anchor: 24},
            {
              label: '状态',
              prop: 'dataStatus',
              xType: 'switch',
              anchor: 24,
              'active-value': 1,
              'inactive-value': 0
            },
            {
              label: '时效时间',
              prop: 'time',
              xType: 'SelectTimeRange.daterange',
              suffix: true,
              suffixInfo: '(不填为永久有效)',
              anchor: 20
            },
            {
              label: '邮箱',
              prop: 'email',
              placeholder: '输入邮箱',
              anchor: 24
            },
            {
              label: '办公室电话',
              prop: 'officeTel',
              placeholder: '输入办公室电话',
              anchor: 24
            },
            {
              label: '联系电话',
              prop: 'telephone',
              placeholder: '输入联系电话',
              anchor: 24
            },
            {
              label: '备注',
              prop: 'remark',
              placeholder: '输入备注',
              anchor: 24
            }
          ],
          rules: {
            groupId: [
              { required: true, message: '请选择所属机构', trigger: 'change' }
            ],
            deptId: [
              { required: true, message: '请选择所属部门', trigger: 'change' }
            ],
            userNo: [
              { required: true, message: '请输入账号', trigger: 'blur' }
            ],
            userName: [
              { required: true, message: '请输入姓名', trigger: 'blur' }
            ],
            // userGrade: [
            //   { required: true, message: "请选择用户等级", trigger: "blur" }
            // ],
            // sex: [{ required: true, message: "请选择性别", trigger: "change" }],
            // dataStatus: [
            //   { required: true, message: "请输入状态", trigger: "blur" }
            // ],
            email: [{ required: false, trigger: "blur", validator: validateUserEmail }],
            telephone: [
              { required: false, trigger: 'blur', validator: validateTel }
            ]
          },
          title: '人员编辑',
          type: 'EDIT',
          ref: 'editForm',
          submitBtnList: this.editSubmitBtn
        },
        look: {
          model: {
            userId: '',
            groupId: '1',
            userNo: '',
            userName: '',
            userGrade: '',
            userGuid: '',
            cardNo: '',
            password: '',
            desPassword: '',
            sex: '',
            deptId: '',
            telephone: '',
            officeTel: '',
            address: '',
            email: '',
            birthday: '',
            idCard: '',
            enabled: '',
            time: '',
            age: '',
            theme: '',
            authStartDate: '',
            authEndDate: '',
            dataStatus: 0,
            json: '',
            version: '',
            creator: '',
            createdTime: '',
            updator: '',
            updatedTime: '',
            ownRoles: '',
            remark: '',
            groupName: '',
            deptName: ''
          },
          fields: [
            {
              label: '所属机构',
              prop: 'groupName',
              anchor: 24,
              disabled: true
            },
            {
              label: '所属部门',
              prop: 'deptName',
              anchor: 24,
              disabled: true
            },
            {
              label: '账号',
              prop: 'userNo',
              placeholder: '',
              anchor: 24,
              disabled: true
            },
            {
              label: '姓名',
              prop: 'userName',
              placeholder: '',
              anchor: 24,
              disabled: true
            },
            // {
            //   label: "用户等级",
            //   prop: "userGrade",
            //   xType: "SelectCode.USER_GRADE",
            //   placeholder: "",
            //   anchor: 24,
            //   disabled: true
            // },
            {
              label: '性别',
              prop: 'sex',
              xType: 'SelectCode.SEX',
              anchor: 24,
              disabled: true
            },
            // { label: "职位", prop: "position", placeholder: "输入职位", anchor: 24},
            {
              label: '状态',
              prop: 'dataStatus',
              xType: 'switch',
              anchor: 24,
              'active-value': 1,
              'inactive-value': 0,
              disabled: true
            },
            {
              label: '时效时间',
              prop: 'time',
              xType: 'SelectTimeRange.daterange',
              suffix: true,
              suffixInfo: '(不填为永久有效)',
              anchor: 20,
              disabled: true
            },
            {
              label: '邮箱',
              prop: 'email',
              placeholder: '',
              anchor: 24,
              disabled: true
            },
            {
              label: '办公室电话',
              prop: 'officeTel',
              placeholder: '',
              anchor: 24,
              disabled: true
            },
            {
              label: '联系电话',
              prop: 'telephone',
              placeholder: '',
              anchor: 24,
              disabled: true
            },
            {
              label: '备注',
              prop: 'remark',
              placeholder: '',
              anchor: 24,
              disabled: true
            }
          ],
          rules: {},
          title: '查看人员管理',
          type: 'LOOK',
          ref: 'lookForm',
          submitBtnList: this.lookSubmitBtn
        }
      }
    }
  },
  methods: {
    // 订制自定义的popper类名
    setClassName(userId) {
      this.pUserId = userId
      return `el-tooltip__popper is-dark username-popover username-${userId}-popover`
    },
    // 获取人员全路径
    getUserAllPath(id, userName) {
      return this.getAllPath({ userId: id })
        .then(({ success, message }) => {
          if (success) {
            this.$nextTick(() => {
              const popover = document.getElementsByClassName(
                `username-${id}-popover`
              )[0]
              popover.classList.remove('el-popover')
              popover.classList.remove('el-popper')
            })
            const changePath =
              (message && message.replace(/\//g, '\\')) || userName
            this.allPath = changePath
          } else {
            this.allPath = userName
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    partTableSelectionColForbid(row, _index) {
      if (row.source && row.source === '导入') {
        // 如果人员如果是导入的话则禁用勾选框
        return 0
      } else {
        return 1
      }
    },
    handleNodeCheck(node) {
      if (node && !this.firstLoadFlag) {
        this.currentNode = node
        this.store._searchParams = {}
        this.store._searchParams['q_' + this.idKey] = node.data[this.nodeIdKey]
        this.$refs.table.load(1, this.store.limit)
      }
      this.firstLoadFlag = false
      this.renderTreeCheckCallback(node)
    },
    getGroupTree(params, data) {
      if (data) params.pid = data['id']
      return request({
        url: '/v1/dataProvider/getGroupTreeList',
        method: 'get',
        params
      })
    },
    getAddDeptmentTree(params, data) {
      if (data) params.node = data['id']
      params.groupId = this.formPanel.add.model.groupId
      return request({
        url: '/v1/dataProvider/getDeptmentTreeList',
        method: 'get',
        params
      })
    },
    getEditDeptmentTree(params, data) {
      if (data) params.node = data['id']
      params.groupId = this.formPanel.edit.model.groupId
      return request({
        url: '/v1/dataProvider/getDeptmentTreeList',
        method: 'get',
        params
      })
    },
    // eslint-disable-next-line
    renderTree(h) {
      return (
        <GroupTree
          ref='tree'
          tree={this.tree}
          on-add-treeNode={this.handleNodeAdd}
          on-check-treeNode={this.handleNodeEdit}
          on-del-treeNode={this.handleNodeDel}
          on-tree-empty={this.handleTreeEmpty}
          on-tree-subSelect={this.handleTreeSubSelect}
          on-tree-import={this.handleTreeImport}
          node-str={this.cNodeStr}></GroupTree>
      )
    },
    // eslint-disable-next-line
    renderCustom(h) {
      return [
        <DialogForm
          visible={this.dialogType === 'DATAFENPEI'}
          width='660px'
          title={this.dialogDataFenpeiTitle}
          on-close={this.handleDataFenpeiCancel}>
          <DataFenpei userId={this.userId} ref='DataFenpei' />
          <c-form ref='form' slot='footer'>
            <c-form-item class='submit-btn'>
              <ButtonList
                operateBtnList={this.DataFenpeiBtns}
                props-model={this.searchModel}
              />
            </c-form-item>
          </c-form>
        </DialogForm>,
        <DialogForm
          visible={this.dialogType === 'ROLEFENPEI'}
          width='660px'
          title={this.dialogRoleFenpeiTitle}
          on-close={this.handleRoleFenpeiCancel}>
          <RoleFenpei ref='RoleFenpei' v-loading={this.roleFenpeiLoading} />
          <c-form ref='form' slot='footer'>
            <c-form-item class='submit-btn'>
              <ButtonList
                operateBtnList={this.RoleFenpeiBtns}
                props-model={this.searchModel}
              />
            </c-form-item>
          </c-form>
        </DialogForm>,
        <DialogForm
          visible={this.dialogType === 'IMPORTPEOPLE'}
          width='1200px'
          title={this.dialogImportPeopleTitle}
          on-close={this.handleImportPeopleCancel}>
          <ImportPeople ref='ImportPeople' />
          <c-form ref='form' slot='footer'>
            <c-form-item class='submit-btn'>
              <ButtonList
                operateBtnList={this.ImportPeopleBtns}
                props-model={this.searchModel}
              />
            </c-form-item>
          </c-form>
        </DialogForm>,
        <DialogForm
          visible={this.dialogType === 'BATCHIMPORT'}
          class='batch-import-dialog'
          width='500px'
          title={this.dialogBatchImportTitle}
          on-close={this.handleBatchImportCancel}>
          <div class='active-deptment'>
            当前部门：{this.currentSelectedDeptmentName}
          </div>
          <c-upload
            action='/v1/datac/app/importData/excel'
            auto-upload={false}
            class='file-upload'
            accept={this.acceptFileType}
            ref='fileUpload'
            limit={1}
            file-list={[]}
            {...{
              props: {
                onSuccess: this.handleFileSuccess,
                onRemove: this.handleFileRemove,
                onChange: this.handleFileChange,
                beforeUpload: this.handleBeforeUpload,
                httpRequest: this.handleUpload
              }
            }}>
            <c-button size='small' type='primary'>
              选取文件
            </c-button>
            <div slot='tip' class='el-upload__tip'>
              只能上传xls/xlsx文件，且不超过5M
            </div>
          </c-upload>
          <c-form ref='form' slot='footer'>
            <c-form-item class='submit-btn'>
              <ButtonList
                operateBtnList={this.batchImportBtns}
                props-model={this.searchModel}
              />
            </c-form-item>
          </c-form>
        </DialogForm>
      ]
    },
    // eslint-disable-next-line
    renderTableHeader(h) {
      return [
        <c-row slot='tableTitle' class='tableTitle'>
          {this.tableTitle}
        </c-row>
      ]
    },
    // eslint-disable-next-line
    renderWrapTable(h) {
      return (
        <WrapTable
          ref='table'
          getData={this.getData}
          total={this.total}
          data={this.data}
          fields={this.columns}
          selectionCol={this.tableSelectionObj}
          tooltip-effect='dark'
          border
          stripe
          default-sort={{ prop: 'funId', order: 'descending' }}
          on-selection-change={this.handleSelectionChange}
          on-row-dblclick={this.handleCurrentChange}>
          <SearchForm
            items={this.searchFields}
            props-model={this.searchModel}
            slot='searchPanel'
            ref='searchForm'>
            <ButtonList
              operateBtnList={this.searchBtnList}
              props-model={this.searchModel}
            />
          </SearchForm>

          <c-row slot='toolPanel' class='toolPanel'>
            <c-col span={this.btnListWidthPercent}>
              <ButtonList operateBtnList={this.toolPanelBtnList} />
            </c-col>
            <c-col span={this.searchInputWidthPercent}>
              {this.showInputFlag ? (
                <c-input
                  class='search-input'
                  placeholder={this.inputPlaceholder}
                  size='small'
                  v-model={this.searchInput}
                  on-input={event => {
                    this.searchInput = event
                  }}
                  nativeOnKeydown={ev => {
                    ev.keyCode === 13
                      ? this.handleInputClick(ev, this.searchInput)
                      : null
                  }}>
                  <i
                    slot='suffix'
                    class='el-input__icon el-icon-search'
                    on-click={ev =>
                      this.handleInputClick(ev, this.searchInput)
                    }></i>
                </c-input>
              ) : (
                ''
              )}
            </c-col>
          </c-row>

          <c-table-column
            label='操作'
            align='center'
            slot='toolbar'
            fixed='right'
            width={this.tableOptWidth}
            {...{
              scopedSlots: {
                default: scope => {
                  return (
                    <TableButtonList
                      operateBtnList={
                        this.projectId
                          ? scope.row.source === '导入'
                            ? this.tableRowBtnListProjectImport
                            : this.tableRowBtnLists
                          : this.systemType === '1'
                            ? this.tableRowBtnLists
                            : this.tableRowBtnListPingtai
                      }
                      props-model={scope.row}
                    />
                  )
                }
              }
            }}
          />
        </WrapTable>
      )
    }
  },
  beforeCreate() {
    // 根据页面路由找出有权限访问的 url 数组
    const urlArr = ((this.$route.meta && this.$route.meta.children) || []).map(
      item => item.url
    )

    // 根据权限 url 数组过滤出能够使用的 按钮数组
    // this.treeMenuBtns = [
    //   {
    //     label: '同步',
    //     methods: 'handleSync',
    //     url: '/v1/sys/syn/synUser2',
    //     path: '/v1/sys/syn/synUser2?allPath=',
    //     icon: 'el-icon-sort',
    //     type: 'text',
    //     action: 'sync'
    //   }
    // ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.toolPanelBtnListPingtai = [
      {
        label: '新增',
        methods: 'handleAdd',
        url: '/v1/sys/user/add',
        icon: 'el-icon-circle-plus-outline',
        type: 'primary',
        diabled: false
      },
      {
        label: '删除',
        methods: 'handleDelGroup',
        url: '/v1/sys/user/deleteList',
        icon: 'el-icon-delete',
        type: 'danger',
        diabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.toolPanelBtnListProject = [
      {
        label: '新增',
        methods: 'handleAdd',
        url: '/v1/sys/user/add',
        icon: 'el-icon-circle-plus-outline',
        type: 'primary',
        diabled: false
      },
      {
        label: '导入',
        methods: 'handleImportPeople',
        url: '/v1/sys/user/importUser',
        svgIcon: 'import',
        type: 'import',
        diabled: false
      },
      // {
      //   label: '批量导入',
      //   methods: 'handleBatchImport',
      //   url: '/v1/sys/user/importUser',
      //   svgIcon: 'import',
      //   type: 'import',
      //   diabled: false
      // },
      // {
      //   label: '模板下载',
      //   methods: 'handleDownloadTemplate',
      //   url: '',
      //   icon: 'el-icon-download',
      //   type: 'import',
      //   diabled: false
      // },
      {
        label: '删除',
        methods: 'handleDelGroup',
        url: '/v1/sys/user/deleteList',
        icon: 'el-icon-delete',
        type: 'danger',
        diabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.tableRowBtnListPingtai = [
      {
        label: '编辑',
        methods: 'handleEdit',
        url: '/v1/sys/user/update',
        icon: 'el-icon-edit-outline',
        type: 'primary',
        key: 'edit',
        align: 'top-start',
        diabled: false
      },
      {
        label: '删除',
        methods: 'handleDelete',
        url: '/v1/sys/user/delete',
        icon: 'el-icon-delete',
        type: 'danger',
        key: 'delete',
        align: 'top-start',
        diabled: false
      },
      {
        label: '密码重置',
        methods: 'handlePasswordReset',
        url: '/v1/sys/user/resetPassword',
        svgIcon: 'resetpwd',
        type: '',
        key: 'resetpwd',
        align: 'top-start',
        diabled: false
      }
      // {
      //   label: "数据分配",
      //   methods: "handleDataFenpei",
      //   url: "/v1/sys/user/assignDataAuth",
      //   svgIcon: "datafenpei",
      //   type: "",
      //   key: "datafenpei",
      //   align: "top-start",
      //   diabled: false
      // }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.tableRowBtnListProjectImport = [
      {
        label: '移除',
        methods: 'handleRemove',
        url: '/v1/sys/user/delete',
        icon: 'el-icon-remove',
        type: '',
        key: 'remove',
        align: 'top-start',
        diabled: false
      }
      // ,
      // {
      //   label: "角色分配",
      //   methods: "handleRoleFenpei",
      //   url: "/v1/sys/user/findRoleListByUserId",
      //   svgIcon: "rolefenpei",
      //   type: "",
      //   key: "rolefenpei",
      //   align: "top-start",
      //   diabled: false
      // }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.tableRowBtnLists = [
      {
        label: '编辑',
        methods: 'handleEdit',
        url: '/v1/sys/user/update',
        icon: 'el-icon-edit-outline',
        type: 'primary',
        key: 'edit',
        align: 'top-start',
        diabled: false
      },
      {
        label: '删除',
        methods: 'handleDelete',
        url: '/v1/sys/user/delete',
        icon: 'el-icon-delete',
        type: 'danger',
        key: 'delete',
        align: 'top-start',
        diabled: false
      },
      // {
      //   label: "角色分配",
      //   methods: "handleRoleFenpei",
      //   url: "/v1/sys/user/findRoleListByUserId",
      //   svgIcon: "rolefenpei",
      //   type: "",
      //   key: "rolefenpei",
      //   align: "top-start",
      //   diabled: false
      // },
      {
        label: '密码重置',
        methods: 'handlePasswordReset',
        url: '/v1/sys/user/resetPassword',
        svgIcon: 'resetpwd',
        type: '',
        key: 'resetpwd',
        align: 'top-start',
        diabled: false
      }
      // {
      //   label: "数据分配",
      //   methods: "handleDataFenpei",
      //   url: "/v1/sys/user/assignDataAuth",
      //   svgIcon: "datafenpei",
      //   type: "",
      //   key: "datafenpei",
      //   align: "top-start",
      //   diabled: false
      // }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.addSubmitBtn = [
      {
        label: '保存并新增',
        methods: 'handleSubmitAndAdd',
        url: '/v1/sys/user/add',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        diabled: false
      },
      {
        label: '保存',
        methods: 'handleAddSubmit',
        url: '/v1/sys/user/add',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        diabled: false
      },
      {
        label: '取消',
        methods: 'handleCancel',
        url: '',
        icon: 'el-icon-circle-close-outline',
        diabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.editSubmitBtn = [
      {
        label: '保存',
        methods: 'handleEditSubmit',
        url: '/v1/sys/user/update',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        diabled: false
      },
      {
        label: '取消',
        methods: 'handleCancel',
        url: '',
        icon: 'el-icon-circle-close-outline',
        diabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.lookSubmitBtn = [
      {
        label: '保存',
        methods: '',
        url: '',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        disabled: true
      },
      {
        label: '取消',
        methods: 'handleCancel',
        url: '',
        icon: 'el-icon-circle-close-outline',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    // render里的按钮
    this.DataFenpeiBtns = [
      {
        label: '保存',
        methods: 'handleDataFenpeiSubmit',
        url: '/v1/sys/user/assignDataAuth',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        disabled: false
      },
      {
        label: '取消',
        methods: 'handleCancel',
        url: '',
        icon: 'el-icon-circle-close-outline',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.RoleFenpeiBtns = [
      {
        label: '保存',
        methods: 'handleRoleFenpeiSubmit',
        url: '/v1/sys/user/assignUserRoles',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        disabled: false
      },
      {
        label: '取消',
        methods: 'handleRoleFenpeiCancel',
        url: '',
        icon: 'el-icon-circle-close-outline',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.ImportPeopleBtns = [
      {
        label: '保存',
        methods: 'handleImportPeopleSubmit',
        url: '/v1/sys/user/importUser',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        disabled: false
      },
      {
        label: '取消',
        methods: 'handleImportPeopleCancel',
        url: '',
        icon: 'el-icon-circle-close-outline',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.batchImportBtns = [
      {
        label: '上传',
        methods: 'handleBatchImportSubmit',
        url: '',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        disabled: false
      },
      {
        label: '取消',
        methods: 'handleCancel',
        url: '',
        icon: 'el-icon-circle-close-outline',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)
  }
}
</script>

<style lang="scss">
.user {
  .left {
    height: 100%;
  }
  .right {
    .tableTitle {
      font-size: 16px;
      font-weight: 400;
      color: #1f2f3d;
      height: 50px;
      align-items: center;
      display: flex;
    }
    .searchPanel {
      padding-bottom: 0;
    }
    .toolPanel {
      .search-input {
        float: right;
      }
    }
    .user-name {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.el-dialog__body {
  .el-date-editor {
    width: 300px !important;
  }
  .suffix {
    color: #606266;
    float: right;
  }
}
.username-popover {
  .popper__arrow {
    display: none;
  }
}
.batchImportLoading {
  background: #000;
  opacity: 0.5;
}
.batch-import-dialog {
  .active-deptment {
    font-size: 20px;
    color: #303133;
    margin-bottom: 20px;
  }
  .el-upload__tip {
    color: red;
  }
}
</style>
